<template>
  <div class="container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" class="demo-form-inline" :model="primaryData">
            <el-form-item label="楼宇名称：">
              <el-input v-model="primaryData.name" placeholder="请输入楼宇名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquirePrimary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="addprimary">添加楼宇</el-button>
        <div class="text item">
          <template>
            <el-table
              :data="primaryTableList"
              style="width: 100%; "
            >
              <el-table-column
                type="index"
                label="序号"
                width="180"
              />
              <el-table-column
                prop="name"
                label="楼宇姓名"
                width="180"
              />
              <el-table-column
                prop="floors"
                label="层数"
              />
              <el-table-column
                prop="area"
                label="在管面积(m²)"
              />
              <el-table-column
                prop="propertyFeePrice"
                label="物业费(m²)"
              />
              <el-table-column label="状态">
                {{ primaryTableList.status===0?'空置中':'租赁中' }}
              </el-table-column>
              <el-table-column prop="address" label="操作">
                <template v-slot="{row}">
                  <el-button type="text" @click="editPrimary(row.id)">编辑</el-button>
                  <el-button type="text" @click="delPrimary(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <el-pagination
          :current-page.sync="primaryData.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="primaryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>

    </div>
    <add-building v-if="showDialog" ref="addBuilding" :primary-id="primaryId" :title="title" :show-dialog.sync="showDialog" @updatePrimaryForm="primaryList" />
  </div>
</template>

<script>
import { delBuilding, getBuilding } from '@/api/buildind'
import AddBuilding from './components/add-building.vue'

export default {
  name: 'Building',
  components: { AddBuilding },
  data() {
    return {
      primaryId: 1,
      title: '新增楼宇',
      showDialog: false,
      total: 0,
      primaryTableList: [],
      primaryData: {
        page: 1,
        pageSize: 10,
        name: ''
      }
    }
  },
  created() {
    this.primaryList()
  },
  methods: {
    // 获取表格列表
    async primaryList() {
      const res = await getBuilding(this.primaryData)
      // console.log(res)
      this.primaryTableList = res.data.rows
      this.total = res.data.total
    },
    // 分页-当页
    handleCurrentChange(page) {
      this.primaryData.page = page
      this.primaryList()
    },
    // 分页-总页
    handleSizeChange(pageSize) {
      this.primaryData.pageSize = pageSize
      this.primaryList()
    },
    // 查询楼宇
    inquirePrimary() {
      this.primaryList()
    },
    // 新增
    addprimary() {
      this.showDialog = true
      this.title = '新增楼宇'
    },
    // 编辑
    async editPrimary(id) {
      this.primaryId = id
      this.showDialog = true
      this.title = '编辑楼宇'
      // 通过ref直接调用子组件的方法
      this.$nextTick(() => this.$refs.addBuilding.editBackfillBuilding())
    },
    // 删除
    async delPrimary(id) {
      try {
        await this.$confirm('是否删除该楼宇?')
        await delBuilding(id)
        this.$message.success('删除成功')
        this.primaryList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both

  }

  .box-card {
    width: 100%;
  }
  .el-pagination{
    float: right;
  }

</style>
